<template>
  <div ref="target" class="wrapper-ele">
    <q-btn class="mark" outline size='16px' no-caps @click="active = !active">
<!--      :icon-right="active ? biCaretUpFill : biCaretDownFill"-->
      <div class="text-center">
        Price
      </div>
      <q-icon right :name="active ? biCaretUpFill : biCaretDownFill" />
    </q-btn>


    <div v-if="active === true" class="sub-layer">
      <div >
        <span class="tip">
          <span>The highest price is $200</span>
          <q-btn color="teal" flat size="sm" @click="reset">Reset</q-btn>
        </span>
      </div>

      <div class="number">
        <div style="max-width: 125px">
          <q-input outlined v-model.number="minNumber" type="number" prefix="$">
          </q-input>
        </div>

        <div class="to"><span>to</span></div>

        <div style="max-width: 125px">
          <q-input outlined v-model.number="maxNumber" type="number" prefix="$">
          </q-input>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import {defineProps, defineEmits, defineExpose, ref, watch} from 'vue'
import { biChevronDown, biChevronUp, biCaretDownFill, biCaretUpFill} from '@quasar/extras/bootstrap-icons'
import { onClickOutside } from '@vueuse/core'

const target = ref(null)
const minNumber = ref(0)
const maxNumber = ref(0)

defineProps({})

const emit = defineEmits([])

defineExpose({})

const active = ref(false)

onClickOutside(target, event => {
  if (active.value === true){
    active.value = false
  }
})

const reset = () => {
  minNumber.value = 0
  maxNumber.value = 0
}

watch(minNumber, (newN, old) => {
  if (newN < 0){
    minNumber.value = 0
  }else if(newN > 999){
    minNumber.value = 999
  }
})
watch(maxNumber, (newN, old) => {
  if (newN < 0){
    maxNumber.value = 0
  }else if(newN > 999){
    maxNumber.value = 999
  }
})
</script>

<style scoped lang='less'>
.mark{
  border-radius: 5px;
  height: 56px;
  margin-right: 15px;
  width: 150px;
  //border: 1px solid #9C27B0;
}
.q-btn--outline:before{
  border: 0.0625rem solid rgba(0, 0, 0, 0.24);
}
.q-btn--outline:focus-within{
  &:before{
    border: 0.0625rem solid #989898;
  }
}


:deep(svg){
  margin-left: 15px;
}

.wrapper-ele{
  position: relative;
  .tip{
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.24);
  }
  .sub-layer{
    top: 70px;
    position: absolute;
    width: max-content;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.24);
    background-color: white;
  }
  .number{
    padding: 15px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .to{
    margin: 0 10px 0 10px;
  }
}
:deep(.q-field__control){
  height: unset;
}
</style>